<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的基础知识</title>
</head>
<body>
    
</body>
<script>
        // 1.类的基础知识-创建类的实列
        //创建一个Person类
         class Person{
            // 构造器方法  
            constructor(name,age){
                //构造器中的this?--类的实例对象
                this.name = name;
                this.age = age;
            }

            //一般方法
            speak(){
                //speak方法哪里去了？---类的原型对象上，供给实例使用
                //通过Person实例，调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name},年龄是${this.age}`)
            }
      
        }
        //创建实例对象Person
        const p1 = new Person('小王',20);
        const p2 = new Person('小纯',18);


        console.log('实例对象Person',p1)// 如果要区分，就要在Person里面传入值
        console.log('实例对象Person',p2)

        p1.speak();
        p2.speak();

        // p2.speak.call({a:1,b:2}); // 通过call -- 更改this指向


        //2.类的继承
        //创建一个Person类

        //创建一个student类，继承于Person类
        class Student extends Person{
            // 构造器可以不用写
            //什么时候写？比如增加一个-属性：高一
            constructor(name,age,grade){
                // this.grade = grade,会报错，因为你必须调用-super,类的语法
                super(name,age)//super必须在最前面
                this.grade = grade//这样写就没有问题
            }

            //重写从父类继承过来的方法
            speak(){
                //speak方法哪里去了？---类的原型对象上，供给实例使用
                //通过Person实例，调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name},年龄是${this.age},年级是${this.grade}`)
            }

            study(){
                console.log('我很努力的学习')
            }
        }
        
        //创建一个学生实例
        const s1 = new Student('小强',15,'高一');
        s1.speak();//如果想显示年级-高一，就要-重写从父类继承过来的方法
        s1.study();
        console.log(s1)


        // 总结：
        //1.类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
        //2.如果A类继承了B类，且A类中的写了构造器，那么A类构造器中的super是必须要调用的
        //3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用
</script>
</html>